<template>
    <view class="container">
        <div v-if="userId">
            <pageMode ref="pageMode" :hasSafe="false" :total.sync="totalNums" />
        </div>
        <div v-else>
            <div class="emptBox">
                <img src="http://192.168.8.10:8700/sex_imgs/app/buy-car.png" class="eptImg" mode="aspectFit" srcset="" />
                <div class="span">
                    <span>您还未登录，请登陆后查看！</span>
                </div>

                <div class="openBtn transBg" @click="showAuthorize = true">
                    <span>立即登录</span>
                </div>
            </div>
        </div>

        <div v-if="totalNums == 0 || !userId">
            <div class="warlock-title">
                <div class="warlock-title-text">
                    <span>好货推荐</span>
                </div>
            </div>
            <div class="goodsBox">
                <ProductShow :productArr="recommenArr"></ProductShow>
            </div>
        </div>

        <LoadMask v-if="initMask" />

        <GetPhone :isShow.sync="showAuthorize" @finish="finishAuth" />
    </view>
</template>

<script>
import pageMode from './pageMode';
import ProductShow from '@/components/ProductShow';
const app = getApp();
import { GoodsList, RecommedGoods } from '@/api/http';
import GetPhone from '@/components/GetPhone';

export default {
    components: { pageMode, ProductShow, GetPhone },
    data() {
        return {
            initMask: true,
            userId: undefined,
            recommenArr: [],
            showAuthorize: false,
            totalNums: 1
        };
    },
    onShow() {
        app.laterToken(bool => {
            this.initCar();
        });
    },
    onLoad(option) {},
    watch: {
        totalNums(current) {
            if (current == 0) {
                this.getRecommonList();
            }
        }
    },
    methods: {
        initCar() {
            let userId = app.globalData.userId;

            // userId = undefined

            this.userId = userId;

            if (userId) {
                this.$nextTick(() => {
                    this.$refs['pageMode'].initCar();
                    this.initMask = false;
                });
            } else {
                this.getRecommonList();
            }
        },
        //为您推荐的列表
        getRecommonList() {
            // RecommedGoods( { "pageNum": 1, "pageSize": 8, openId: app.getOpenID()} )
            GoodsList({ pageNum: 1, pageSize: 8, commonStatusList: [1] })
                .then(response => {
                    this.recommenArr = response.data.map(item => {
                        item.listPictureSrc = this.$getImg(item.listPicture);

                        item.isJingpin = (item.goodsName || '').includes('精品');

                        item.tagsArr = (item.remark || '').split(/,|，|;/g);
                        item.labelArr = (item.productLabelTypeName || '').split(/,|，|;/g);

                        return item;
                    });
                })
                .finally(() => {
                    this.initMask = false;
                });
        },
        //授权回来呢
        finishAuth() {
            this.initCar();
        }
    }
};
</script>

<style scoped lang="scss">
.emptBox {
    text-align: center;
    padding: 40px 0 50px;
    .eptImg {
        width: 110px;
        height: 110px;
    }
    .span {
        // margin-top: 10px;
        color: #c6cacf !important;
        font-size: 30rpx;
    }
    .openBtn {
        padding: 0;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 30rpx;
        margin: 20px auto 0;
        border-radius: 60rpx;
        color: #fff;
        width: 80%;
    }
}
.warlock-title {
    position: relative;
    box-sizing: content-box;
    height: 48rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-weight: 400;
    color: #888;
    font-size: 28rpx;
    line-height: 48rpx;
    text-align: center;

    .warlock-title-text {
        position: relative;
        padding: 0 20rpx;
        z-index: 9;
        display: inline-block;
        &::after,
        &::before {
            content: ' ';
            display: block;
            position: absolute;
            top: 50%;
            width: 50rpx;
            height: 0;
            border-bottom: 1px solid #9a9a9a;
        }
        &::before {
            left: -50rpx;
        }
        &::after {
            right: -50rpx;
        }
    }
}
.goodsBox {
    padding: 10rpx 30rpx 40rpx;
}
</style>
